<!-- 撤销汇总 -->
<template>
  <div class="return-summary">
    <!-- 查询 -->
    <el-form label-width="60px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
      <el-row :gutter="15">
        <el-col :span="19">
          <el-form-item>
            <el-date-picker
              v-model="formData.applyTime"
              type="daterange"
              class="time-small"
              @change="parentName"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="客户">
            <el-select class="input-small" v-model="formData.customerName" @change="parentName" @visible-change="selectStar" placeholder="请选择客户">
              <el-option label="所有客户" value=""></el-option>
              <el-option v-for="(item, index) in userInfo" :key="index" :label="item.search" :value="item.UserId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="船代">
            <el-select class="input-small" v-model="formData.shipAgencyName" filterable @change="parentName" placeholder="请选择船代">
              <el-option label="所有船代" value=""></el-option>
              <el-option v-for="(item, index) in boatList" :key="index" :label="item.text" :value="item.shipAgencyId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="船公司">
            <el-select class="input-small" v-model="formData.company" filterable @change="parentName" placeholder="请选择船公司">
              <el-option label="所有船公司" value=""></el-option>
              <el-option v-for="(item, index) in boatCompanyList" :key="index" :label="item.nameCncode" :value="item.boatComId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select class="input-small" v-model="formData.boxState" @change="parentName" placeholder="请选择状态">
              <el-option v-for="(item, index) in boxTate" :key="index" :label="item.lable" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提单号">
            <el-input v-model="formData.blno" placeholder="请输入提单号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :disabled="this.multipleSelection.length === 0 ? true : false" size="mini" @click="goBack()">回退</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <div style="display: flex; justify-content: flex-end;">
            <el-button type="primary" size="mini" @click="getShutSummary(1, 15)">搜索</el-button>
            <el-button type="primary" size="mini" @click="tableSetting">列表设置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      border :cell-style="tableRowClass" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="50"></el-table-column>
      <el-table-column
        v-for="item in myfieldList"
        :prop="item.props"
        :key="item.id"
        :width="item.width"
        align="center"
        :show-overflow-tooltip="true"
        :label="item.field">
        <template slot-scope="scope">
          <div v-if="item.props === 'clientName'">
            <el-popover trigger="hover" placement="right" width="300">
              <div>
                <h4 style="display: inline-block; font: bold">联系方式:</h4> {{ scope.row.userInfo ? scope.row.userInfo[0].mobile2 : '' }}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">电话:</h4> {{ scope.row.userInfo ? scope.row.userInfo[0].phone1 : '' }}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">手机:</h4> {{ scope.row.userInfo ? scope.row.userInfo[0].mobile1 : '' }}
              </div>
              <div>
                  <h4 style="display: inline-block; font: bold">QQ:</h4> {{ scope.row.userInfo ? scope.row.userInfo[0].qq : '' }}
                </div>
              <div>
                <h4 style="display: inline-block; font: bold">传真:</h4> {{ scope.row.userInfo ? scope.row.userInfo[0].fax : '' }}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">地址:</h4> {{ scope.row.userInfo ? scope.row.userInfo[0].address : '' }}
              </div>
              <el-button style="padding: 0px;" type="text" slot="reference">{{ scope.row.clientName }}</el-button>
            </el-popover>
          </div>
          <div v-else-if="item.props === 'putBoxFileList'">
            <el-button size="mini" v-if="scope.row.putBoxFileList.length > 0" type="primary" icon="el-icon-view" @click="openFile(scope.row.putBoxFileList)"></el-button>
            <el-button size="mini" v-else type="primary" icon="el-icon-view" disabled></el-button>
          </div>
          <div v-else>
            {{tableData[scope.$index][item.props]}}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="chargeable_table_pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="numb"
        @size-change="handleSizeChange"
        :page-sizes="[10, 15, 20]"
        :current-page.sync="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 查看图片 -->
    <el-dialog :append-to-body="true" width="800px" title="查看文件" :visible.sync="fileView">
      <div class="viewImg">
        <img style="width: 100%;" v-for="item in flieList" :key="item.putBoxFileId" :src="item.putBoxfile" alt="">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fileView = false">取 消</el-button>
        <el-button type="primary" @click="fileView = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 设置列表 -->
    <list-setting-dialog :table-props="fieldStr" :allList="allStr" :listIndex="listIndex" @changtype="changtype" @close="close" :open="open" :pageName="pageName"></list-setting-dialog>
  </div>
</template>

<script>
import {
  matchOrder,
  shutSummary
} from './api/revocationSummary'
import {
  shipAgencyList,
  SearchUserInfo,
  boatCompanyList,
  getField,
  setputBoxFieldOrder
} from '../finance/api/finance'
import ListSettingDialog from '../shared/ListSettingDialog'
export default {
  components: {
    ListSettingDialog
  },
  data () {
    return {
      tableData: [],
      formData: {
        customerName: '',
        company: '',
        shipAgencyName: '',
        boxState: -1,
        applyTime: [],
        blno: ''
      },
      boxTate: [
        {lable: '全部', value: -1},
        {lable: '新业务', value: 0},
        {lable: '放单中', value: 1},
        {lable: '已完成', value: 2},
        {lable: '已拒绝', value: 3},
        {lable: '没预配', value: 4},
        {lable: '船期早', value: 5},
        {lable: '明天放', value: 6},
        {lable: '已退关', value: 7},
        {lable: '等通知', value: 8},
        {lable: '客户取消', value: 9},
        {lable: '退单', value: 10},
        {lable: '申请中', value: 11},
        {lable: '爆仓', value: 12},
        {lable: '有问题', value: 13},
        {lable: '缺箱子', value: 14},
        {lable: '换单中', value: 15}
      ],
      multipleSelection: [],
      boatList: [],
      userInfo: [],
      flieList: [],
      listIndex: '',
      pageName: '',
      fieldStr: '',
      allStr: '',
      fieldList: [],
      allList: [], // 所有的列表设置集合
      boatCompanyList: [],
      key: false,
      open: false,
      loading: true,
      fileView: false,
      pageNo: 1,
      numb: 15,
      total: 0
    }
  },
  mounted () {
    this.getShutSummary(1, 15)
    this.SearchBoatAgentComData()
    this.getBoatCompanyList()
    this.SearchUserInfo()
  },
  computed: {
    myfieldList: function () {
      return this.fieldList.filter(function (value) {
        return value.isShow === true
      })
    }
  },
  methods: {
    // 获取撤销汇总
    async getShutSummary (pg, nb) {
      this.getSettingList('撤销汇总')
      this.loading = true
      if (this.formData.applyTime === null) {
        this.formData.applyTime = []
      }
      const res = await shutSummary({
        page: pg,
        num: nb,
        customerName: this.formData.customerName,
        company: this.formData.company,
        shipAgencyName: this.formData.shipAgencyName,
        theOperatorId: '',
        status: 0,
        blno: this.formData.blno,
        boxState: this.formData.boxState,
        applyStartTime: this.formData.applyTime[0],
        applyEndTime: this.formData.applyTime[1]
      })
      if (res.status === 200) {
        this.tableData = res.data
        if (res.count) {
          this.total = parseInt(res.count)
        } else {
          this.total = 0
        }
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    tableRowClass ({row, column, rowIndex, columnIndex}) {
      if (column.property === 'boxState') {
        switch (row.boxState) {
          case '0':
            return 'color: red; font-weight: 700'
          case '放单中':
            return 'color: #67C23A; font-weight: 700'
          case '已完成':
            return 'color: #909399; font-weight: 700'
          case '已拒绝':
            return 'color: #E6A23C; font-weight: 700'
          case '没预配':
            return 'color: red; font-weight: 700'
          case '船期早':
            return 'color: #67C23A; font-weight: 700'
          case '明天放':
            return 'color: #909399; font-weight: 700'
          case '已退关':
            return 'color: #E6A23C; font-weight: 700'
          case '等通知':
            return 'color: ##67C23A; font-weight: 700'
          case '客户取消':
            return 'color: #909399; font-weight: 700'
          case '退单':
            return 'color: #F56C6C; font-weight: 700'
          case '申请中':
            return 'color: #F56C6C; font-weight: 700'
          case '爆仓':
            return 'color: #E6A23C; font-weight: 700'
          case '有问题':
            return 'color: #67C23A; font-weight: 700'
          case '新业务':
            return 'color: #3c8dbc; font-weight: 700'
          case '缺箱子':
            return 'color: #909399; font-weight: 700'
          case '换单中':
            return 'color: #F56C6C; font-weight: 700'
          default:
            return 'color: gary; font-weight: 700'
        }
      } else {
        return ''
      }
    },
    // 获取船代公司列表
    async SearchBoatAgentComData () {
      const res = await shipAgencyList({})
      if (res.status === 200) {
        this.boatList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取船代公司列表
    async getBoatCompanyList () {
      const res = await boatCompanyList({})
      if (res.status === 200) {
        this.boatCompanyList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    selectStar (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.SearchUserInfo()
        }, 500)
      }
    },
    selectShip (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.SearchBoatAgentComData()
        }, 500)
      }
    },
    // 获取客户信息
    async SearchUserInfo () {
      const res = await SearchUserInfo({})
      if (res.status === 200) {
        this.userInfo = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取船代公司列表
    async goBack () {
      const res = await matchOrder({
        codeList: this.multipleSelection
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.getShutSummary(this.pageNo, this.numb)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 页数
    handleCurrentChange (val) {
      this.getShutSummary(val, this.numb)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getShutSummary(this.pageNo, val)
      this.numb = val
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 封装的调用父组件方法
    parentName () {
      this.getShutSummary(this.pageNo, this.numb)
    },
    // 子组件方法
    close () {
      this.open = false
    },
    changtype (e) {
      this.allList.map((item, index) => {
        if (item.styleId === e) {
          this.fieldList = item.returnList
        }
      })
    },
    // 上传默认数据
    async defaultData (mylist, pgnm) {
      const res = await setputBoxFieldOrder({
        pageName: pgnm,
        fieldList: mylist
      })
      if (res.status === 200) {
        console.log(pgnm, '初始化默认顺序')
        this.getSettingList(pgnm)
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取设置列表
    async getSettingList (pgnm) {
      this.pageName = pgnm
      const res = await getField({
        pageName: pgnm
      })
      if (res.status === 200) {
        if (res.data.length === 0) {
          let myList = [
            { field: '还箱堆场', props: 'returnYard', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '客户名称', props: 'clientName', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船代', props: 'shipAgencyName', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船公司', props: 'company', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船信息', props: 'boat', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '提单号', props: 'blno', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '箱信息', props: 'boxType', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '堆场', props: 'yard', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '卸港', props: 'discharge', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '总费用', props: 'sumMoney', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '备注', props: 'mome', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '图片', props: 'putBoxFileList', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '文件', props: 'fileAddress', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '状态', props: 'boxState', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '修改时间', props: 'updateTime', isShow: 0, width: 120, colour: '', styleId: '', styleName: '默认样式', styleType: 1 }
          ]
          this.defaultData(myList, pgnm)
        } else {
          let myid = ''
          if (res.showStyleId === '') {
            myid = 0
          }
          res.data.map((value, index) => {
            if (value.styleId === res.showStyleId) {
              myid = index
            }
            value.returnList.map(item => {
              if (item.isShow === '0') {
                item.isShow = true
              } else {
                item.isShow = false
              }
            })
          })
          this.allList = res.data
          this.listIndex = res.showStyleId
          this.fieldList = res.data[myid].returnList
          this.key = true
        }
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    openFile (row) {
      // console.log(row, '000000000')
      this.fileView = true
      this.flieList = row
    },
    // 打开列表设置
    tableSetting () {
      this.allStr = JSON.stringify(this.allList)
      this.fieldStr = JSON.stringify(this.fieldList)
      this.getSettingList('撤销汇总')
      if (this.key) {
        this.open = true
      }
    }
  }
}
</script>

<style lang="less">
.return-summary {
  .input-small {
    width: 120px;
  }
  .time-small {
    width: 260px;
  }
}
</style>
